@import 'public';
.container-fluid{
	background-color: #f6f6f6;
}
// 界面头部
.top-banner{
	width: 100%;
	height: 48rem;
	padding-top: 1px;
	background-image: url(https://img.imgdb.cn/item/6037008f5f4313ce256b379c.png);
	background-position: top;
	background-size: contain;
	background-repeat: no-repeat;
	.user-information{
		height: 22rem;
		margin-top: 7rem;
		z-index: 1000;
		.user-face{
			width: 17rem;
			height: 100%;
			float: left;
			.picture{
				width: 12rem;
				height: 12rem;
				border-radius: 7rem;
				border: 1rem  white solid;
				margin: 2.5rem auto;
				background-image: url(https://img.imgdb.cn/item/60370ff05f4313ce258745e2.png);
				background-position: center;
				background-size: cover;
			}
		}
		.user-msg{
			width: 54rem;
			height: 100%;
			float: left;
			position: relative;
			.setup{
				width: 4rem;
				height: 4rem;
				position: absolute;
				top: 0;
				left: 43rem;
				background-image: url(https://img.imgdb.cn/item/6037008f5f4313ce256b3799.png);
				background-position: center;
				background-size: cover;
			}
			.message{
				width: 4rem;
				height: 4rem;
				position: absolute;
				top: 0;
				left: 50rem;
				background-image: url(https://img.imgdb.cn/item/6037008f5f4313ce256b3792.png);
				background-position: center;
				background-size: cover;
			}
			.tagline{
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				.line1{
					font-size: 3.5rem;
					font-weight: bold;
					color: white;
				}
				.line2{
					font-size: 3rem;
					color: white;
				}
			}
		}
	}
	.card-information{
		height: 16rem;
		padding-top: 1px;
		border-radius: 1.5rem;
		background-image: url(https://img.imgdb.cn/item/6037008f5f4313ce256b3796.png);
		background-position: center;
		background-size: cover;
		position: relative;
		.card-title{
			font-size:3.2rem ;
			font-weight: bold;
			color: #ffebc3;
			margin-top: 3.5rem;
			margin-left: 3rem;
			vertical-align: middle;
			i{
				display: inline-block;
				height: 3.8rem;
				width: 4.2rem;
				background-image: url(https://img.imgdb.cn/item/60370ff05f4313ce258745dc.png);
				background-position: center;
				background-size: cover;
				vertical-align: middle;
				margin-right: 2.5rem;
			}
		}
		.card-line{
			font-size: 2.8rem;
			color: white;
			margin-top: 2rem;
			margin-left: 3rem;
		}
		.card-buy{
			position: absolute;
			top: 5rem;
			left: 49rem;
			background-color: rgba(0,0,0,0);
			width: 18rem;
			height: 6rem;
			line-height: 6rem;
			border-radius: 2.8rem;
			border: .4rem #ffebc3 solid;
			color: #ffebc3;
			font-size: 3rem;
		}
	}
}
// 基本功能栏
.function-bar{
	height: 17rem;
	background-color: white;
	border-radius: 2rem;
	ul{
		display: flex;
		justify-content: space-between;
		li{
			width: 20%;
			height: 100%;
			img{
				width: 6rem;
				height: 5rem;
				margin: 4rem 4rem 3rem 4rem;
			}
			p{
				font-size: 3rem;
				text-align: center;
				color: #979797;
			}
		}
	}
}
// 分区列表
.area-list{
	margin-top: 3rem;
	background-color: white;
	border-radius: 2rem;
	ul{
		li{
			width: 100%;
			height: 12rem;
			line-height: 12rem;
			img{
				display: inline-block;
				width: 6rem;
				height: 6rem;
				vertical-align: middle;
				margin-left: 3rem;
				margin-right: 2rem;
			}
			p{
				display: inline-block;
				margin-right: 38rem;
				font-size: 3.5rem;
				font-weight: bold;
				vertical-align: middle;
			}
			i{
				display: inline-block;
				width: 2rem;
				height: 2rem;
				border: .8rem #e7e7e7 solid;
				border-bottom:0;
				border-left: 0;
				transform: rotate(45deg);
				vertical-align: middle;
			}
		}
	}
}
// 猜你喜欢
.guess-love{
	.love-title{
		position: relative;
		width: 100%;
		margin: 4rem;
		.title-contain{
			// text-align: center;
			margin-left: 20rem;
			img{
				display: inline-block;
				width: 5rem;
				height: 4rem;
				vertical-align: middle;
			}
			p{
				display: inline-block;
				font-size: 4rem;
				font-weight: bold;
				vertical-align: middle;
			}
			&::before{
				content: '';
				display: inline-block;
				position: absolute;
				top: 2rem;
				left: 13rem;
				width: 5rem;
				height: .2rem;
				background-color:#ababab ;
			}
			&::after{
				content: '';
				display: inline-block;
				position: absolute;
				top: 2rem;
				left: 44rem;
				width: 5rem;
				height: .2rem;
				background-color:#ababab ;
			}
		}
	}
	.love-list{
		overflow: hidden;
		height: 8rem;
		ul{
			display: flex;
			padding: 0;
			position: relative;
			li{
				font-size: 3rem;
				color: black;
				text-align: center;
				flex-shrink: 0;
				position: relative;
				width: 20rem;
				height: 8rem;
				line-height: 8rem;
				font-weight: bold;
				&.active {
				    font-size: 3.2rem;
					color: #ff492e;
				    font-weight: bold;
				}
				&.active:after {
				    content: '';
				    display: block;
				    width: 3rem;
				    height: .8rem;
				    background-color: #ff492e;
				    position: absolute;
				    top: 7rem;
				    left: 50%;
					transform: translateX(-50%);
				}
			}
		}
	}
	.love-space{
		display: flex;
		justify-content: space-around;
		margin-top: 2rem;
		flex-wrap: wrap;
		.love-item{
			width: 34rem;
			height: 52rem;
			border-radius: 2rem;
			background-color: white;
			img{
				width: 100%;
				height: 35rem;
				border-radius: 2rem 2rem 0 0;
			}
			.item-information{
				.item-title{
					font-size: 3rem;
					font-weight: bold;
					margin: 1rem 2rem 0 2rem;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
				.item-price{
					display: inline-block;
					font-size: 3.5rem;
					color: #ff433d;
					font-weight:bold;
					margin: 1rem 2.5rem 0 2.5rem;
				}
				i{
					display: inline-block;
					vertical-align: middle;
					width: 2.5rem;
					height: 2.5rem;
					border: .2rem #ff433d solid;
					border-radius: .5rem;
					color: #ff433d;
					font-size: 1.8rem;
					text-align: center;
					line-height: 2.5rem;
				}
				.look-similar{
					display: inline-block;
					vertical-align: middle;
					margin-left: 8rem;
					width: 8rem;
					height: 3.5rem;
					border: .2rem #ababab solid;
					border-radius: 1rem;
					color: #ababab;
					font-size: 1.8rem;
					text-align: center;
					line-height: 2.5rem;
				}
			}
		}
	}
	
}